<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伸缩容器、伸缩项目</title>
    <style>
        .outer {
            width: 700px;
            height: 300px;
            background-color: gray;

            /* 开启伸缩盒模型 */
            display: flex;
            margin: 0 auto;
            /* 主轴方向 */
            flex-direction: column;
            flex-direction: row-reverse;
            /* 换行方式 */
            /* 自动换行 */
            flex-wrap: wrap;   
            /* 反向换行 */
            /* flex-wrap: wrap-reverse; */

        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: deeppink;
            box-sizing: border-box;
            border-width: 2px;
            border-style: solid;
            border-color: black;
           
        }
       
    </style>
</head>
<body>
    <!-- 伸缩容器 -->
    <div class="outer">
        <!-- 伸缩项目 -->
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div> 
        <div class="inner">4</div>
        <div class="inner">5</div>
        <div class="inner">6</div> 
        <div class="inner">7</div> 
        <div class="inner">8</div> 
        <div class="inner">9</div> 
        <div class="inner">10</div> 
        <div class="inner">11</div> 
        <div class="inner">12</div> 
        <div class="inner">13</div> 
        <div class="inner">14</div> 
        <div class="inner">15</div> 
        <div class="inner">16</div> 
        
    </div>
</body>
</html>